import "./style.css"
import { Tabs } from "antd-mobile"
import { useTabs } from "./useTabs"
import HomeList from "./HomeList/index"

const Home = () => {
	// 调用自定义hooks，获取频道列表
	const { channels } = useTabs()

	return (
		<div>
			<div className="tabContainer">
				{/* tab区域 */}
				<Tabs defaultActiveKey={"0"}>
					{/* list组件 */}
					{channels.map((item) => (
						<Tabs.Tab title={item.name} key={item.id}>
							<div className="listContainer">
								<HomeList channelId={"" + item.id} />
							</div>
						</Tabs.Tab>
					))}
				</Tabs>
			</div>
		</div>
	)
}

export default Home
